<!--
 * @Descripttion: 直购订单管理（供应商）
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-10-14 19:27:09
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-20 14:08:41
-->

<template>
  <div class="data-center">
    <!-- 查询 -->
    <div ref="filter">
      <el-form
        :inline="true"
        :model="form"
        ref="form"
        :label-position="'right'"
        label-width="100px"
        label-suffix=":"
      >
        <el-row>
          <el-col :span="20">
            <el-row>
              <el-form-item label="起止时间">
                <el-date-picker
                  class="order-filter-date"
                  style="width: 466px"
                  v-model="timeArr"
                  type="daterange"
                  range-separator="—"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="所属单位">
                <el-input placeholder="请输入" v-model="form.purchaseName" />
              </el-form-item>
              <el-form-item label="订单号">
                <el-input placeholder="请输入订单号/电商订单号" v-model="form.orderNo" />
              </el-form-item>
              <el-form-item label="商品名称">
                <el-input placeholder="请输入" v-model="form.goodsName" />
              </el-form-item>
              <el-form-item label="收货人">
                <el-input placeholder="请输入" v-model="form.consignee" />
              </el-form-item>
              <el-form-item label="订单状态">
                <el-select
                  v-model="form.orderState"
                  placeholder="请选择"
                  class="order-filter-select"
                  style="width: 178px"
                >
                  <el-option
                    v-for="item in orderStateList"
                    :key="item.code"
                    :label="item.optional1"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发票类型">
                <el-input placeholder="请输入" v-model="form.receiptType" />
              </el-form-item>
			  <el-form-item label="订单类型">
			    <el-select
			      v-model="form.orderType"
			      placeholder="请选择"
			      class="order-filter-select"
			      style="width: 178px"
			    >
			      <el-option label="自营" value="1"></el-option>
			      <el-option label="撮合" value="0"></el-option>
			    </el-select>
			  </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4" class="form-operation">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSearch"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh-right" @click="resetForm('form')"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
          <el-button type="primary" @click="exportOrderFn">
              导出订单
            </el-button>
            <!-- <el-button type="primary" @click="exportTemplate">
              下载模板
            </el-button> -->
          </el-form-item>
          <!-- <el-form-item>
            <el-upload
              :headers="headers"
              class="upload-demo"
              :show-file-list="false"
              accept=".xlsx"
              action="/api/orderLogistics/upload"
              :on-success="uploadSuccess"
              :file-list="fileList">
              <el-button type="primary">导入物流信息</el-button>
            </el-upload>
          </el-form-item> -->
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table
      border
      :data="tableData"
      style="width: 100%"
      :height="maxHeightNow"
      ref="table"
    >
      <el-table-column
        prop="orderNo"
        width="160"
        label="订单号"
      ></el-table-column>
      <el-table-column
        prop="eshopNumber"
        width="160"
        label="电商订单号"
      ></el-table-column>
      <el-table-column
        prop="goodsName"
        width="300"
        label="商品名称"
      ></el-table-column>
      <el-table-column prop="consignee" label="收货人"></el-table-column>
      <el-table-column prop="phone" label="联系方式"></el-table-column>
      <el-table-column
        prop="completeAddress"
        width="160"
        label="收货地址"
      ></el-table-column>
      <el-table-column prop="eshopOrderPrice" label="订单金额"></el-table-column>
      <el-table-column prop="purchaseName" label="所属单位"></el-table-column>
      <el-table-column prop="supplierName" label="电商"></el-table-column>
      <el-table-column prop="payment" label="付款方式"></el-table-column>
      <el-table-column prop="createTime" label="下单时间"></el-table-column>
      <el-table-column
        prop="orderState"
        width="100"
        label="订单状态"
      ></el-table-column>
      <el-table-column label="订单类型">
		  <template slot-scope="scope">
			  {{scope.row.orderType==1?'自营':scope.row.orderType==0?'撮合':''}}
		  </template>
	  </el-table-column>
      <el-table-column prop="isDeliver" label="物流状态"></el-table-column>
      <el-table-column prop="receiptType" label="发票类型"></el-table-column>
      <el-table-column prop="dutyParagraph" label="发票税号"></el-table-column>
      <el-table-column prop="unitName" label="单位名称"></el-table-column>
      <el-table-column prop="registrationTelephone" label="发票打印电话"></el-table-column>
      <el-table-column prop="depositBank" label="开户银行"></el-table-column>
      <el-table-column prop="accountNumber" label="银行账号"></el-table-column>
      <el-table-column prop="registeredAddress" label="发票打印地址"></el-table-column>

      <el-table-column fixed="right" label="操作" width="260">
        <template slot-scope="scope">
          <div class="action-row">
            <el-button
              type="primary"
              size="mini"
              @click="handleEvent(scope.row)"
            >
              订单详情
            </el-button>
            <el-button
              type="warning"
              size="mini"
              @click="supplierSyncFn(scope.row)"
            >
              同步订单状态
            </el-button>
          </div>
          <!-- <div class="action-row">
            <el-button
              type="warning"
              size="mini"
              @click="handleEvent(scope.row)"
            >
              导入物流信息
            </el-button>
          </div> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="set-pagination">
      <el-pagination
        background
        layout="prev, pager, next, sizes, total"
        :hide-on-single-page="false"
        :current-page="current"
        :page-size="size"
        :total="total"
        @current-change="changePage"
        @size-change="changeSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getsupplierList,
  exportOrder,
  supplierSync,
  exportTemplate,
} from "@/api/supplier.api";
import { queryDictionaryList } from "@/api/common.api";
import moment from "moment";
import tools from '@/tools'
export default {
  name: "data-center",
  data() {
    return {
      // 筛选时间
      timeArr: [],
      // 订单状态option
      orderStateList: [],
      form: {
        purchaseName: "",
        orderNo: "",
        goodsName: "",
        consignee: "",
        orderState: "",
        receiptType: "",
		orderType:""
      },
      maxHeightNow: null,
      tableData: [],
      current: 1,
      size: 10,
      total: 0,
      fileList: [],
      headers: {
        'Authorization': tools.localRead('access_token'),
        'Metis-InternalModule': 'aaaa',
        // 'Metis-ReqId':  createUuid(),
        'Metis-Tenant': '8dd10f97bc684b4fbc845c0b344883aa',
        'Metis-UserId': tools.localRead('userId')
      }
    };
  },
  created() {
    this.queryOrderStateListFn();
    this.getsupplierListFn();
  },
  mounted() {
    this.getHeight();
  },
  methods: {
    //  计算表格高度
    getHeight() {
      let h = this.$refs.filter.clientHeight;
      this.maxHeightNow = window.innerHeight - 142 - h + "px";
    },
    handleEvent(item) {
      this.$router.push({
        path: "/supplier-detail",
        query: { id: item.orderId, isLocal: '0' }
      });
      // const newPage = this.$router.resolve({path: '/supplier-detail', query: {id: 11111}})
      // window.open(newPage.href,'_blank')
    },
    onSearch() {
      this.current = 1;
      this.getsupplierListFn();
    },
    // 查询订单状态option
    queryOrderStateListFn() {
      const param = { dictionaryType: "order_state", dictionaryKey1: "order" };
      queryDictionaryList(param).then((res) => {
        this.orderStateList = res
      })
    },
    //  获取列表
    getsupplierListFn() {
      const createTimeBegin = this.timeArr[0]
        ? moment(this.timeArr[0]).format("YYYY-MM-DD") + " 00:00:00"
        : "";
      const createTimeEnd = this.timeArr[1]
        ? moment(this.timeArr[1]).format("YYYY-MM-DD") + " 23:59:59"
        : "";
      const datta = {
        current: this.current,
        size: this.size,
        createTimeBegin,
        createTimeEnd,
        purchaseName: this.form.purchaseName,
        orderNo: this.form.orderNo,
        goodsName: this.form.goodsName,
        consignee: this.form.consignee,
        orderState: this.form.orderState,
        receiptType: this.form.receiptType,
        orderType: this.form.orderType,
      };
      getsupplierList(datta).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    //  翻页
    changePage(e) {
      this.current = e;
      this.getsupplierListFn();
    },
    // 改变分页size
    changeSize(e) {
      this.size = e;
      this.getsupplierListFn();
    },
    // 重置表单
    resetForm(formName) {
      this.form = {};
      this.$refs[formName].resetFields();
    },
    // 导出订单
    exportOrderFn() {
		const createTimeBegin = this.timeArr[0]
		  ? moment(this.timeArr[0]).format("YYYY-MM-DD") + " 00:00:00"
		  : "";
		const createTimeEnd = this.timeArr[1]
		  ? moment(this.timeArr[1]).format("YYYY-MM-DD") + " 23:59:59"
		  : "";
		const data = {
		 current: this.current,
		 size: this.size,
		 createTimeBegin,
		 createTimeEnd,
		 purchaseName: this.form.purchaseName,
		 orderNo: this.form.orderNo,
		 goodsName: this.form.goodsName,
		 consignee: this.form.consignee,
		 orderState: this.form.orderState,
		 receiptType: this.form.receiptType,
		 orderType: this.form.orderType,
		};
      exportOrder(data).then((res) => {
        let blob = new Blob([res], {
          type: "application/vnd.ms-excel",
        });
        this.saveAs(blob, "订单列表.xlsx");
      });
    },
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      } else {
        var link = document.createElement("a");
        var body = document.querySelector("body");
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },
    // 同步电商数据
    supplierSyncFn(item) {
      if (item.eshopNumber) {
        supplierSync(item.eshopNumber).then((res) => {
          if (res) {
            this.$alert("同步订单成功！", "提示", {
              confirmButtonText: "确定",
              type: "success",
            });
          } else {
            this.$alert("同步订单失败！", "提示", {
              confirmButtonText: "确定",
              type: "warning",
            });
          }
        });
      } else {
        this.$alert("订单数据异常！", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      }
    },
    // 下载模板
    exportTemplate() {
      exportTemplate().then((res) => {
        let blob = new Blob([res], { type: "application/vnd.ms-excel" });
        this.saveAs(blob, "物流模板.xlsx");
      });
    },
    // 上传成功 导入物流信息
    uploadSuccess(res){
      if (res&&res.data==='true') {
        this.$message({
          type: 'success',
          message: '上传成功!'
        });
      }else{
        this.$message({
          type: 'error',
          message: '上传失败!'
        });
      }
      this.fileList = []
    },
  },
};
</script>

<style scoped lang='scss'>
.data-center {
  background: #fff;
  .action-row {
    margin: 10px;
  }
}
</style>
